<template>
	<page-meta :root-font-size="fontSize"></page-meta>
	<view class="myView">
		<!-- 照片背景图 -->
		<view>
			<image src="../static/titcket/advertising.png" class="imageTop" mode="aspectFill"></image>
		</view>
		<!-- 车票查询 -->
		<view class="queryTickets">
			<view class="ticketView">
				<view v-for="(TypeN,typeIndex) in lineTypeNs" :key="typeIndex">
					<view class="lineClass" style="margin-top: 0rpx;">
						<view v-for="(item,index) in lineList" :key="index">
							<view class="queryView"
								v-if="index >= (typeIndex * lineTypeVs) && index < ((typeIndex+1) * lineTypeVs)">
								<button class="queryButton jh_fs_32" v-if="item.LineName.length<8"
									@click="queryClick(index)">{{item.LineName}}</button>
								<!-- <button class="queryButton jh_fs_32" style="font-size: 25.8rpx;" v-if="item.LineName.length>=8"
										@click="queryClick(index)">{{item.LineName}}</button> -->
								<view class="queryButton jh_fs_32 " @click="queryClick(index)"
									v-if="item.LineName.length>=8&&item.LineName.length<16">
									<view
										style="font-size: 31rpx;margin-left: 36rpx; max-width: 240rpx;word-wrap: break-word;overflow-wrap: break-word;">
										{{item.LineName}}
									</view>
								</view>
								<view class="queryButton jh_fs_32 " @click="queryClick(index)"
									v-if="item.LineName.length>=16">
									<view
										style="font-size: 26.6rpx;margin-left: 36rpx; max-width: 240rpx;word-wrap: break-word;overflow-wrap: break-word;">
										{{item.LineName}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="lineClass" style="margin-top: -20rpx;">
					<view style="margin-left: 50rpx;font-weight: 400;font-size: 32rpx;">出行日期:</view>
					<view style="margin-left: 20rpx;" @click="calendarSelect">
						<view class="dateClass jh_fs_32" style="margin-left: 50rpx;">{{selectDate}}</view>
					</view>
				</view>
				<view
					style="position: absolute;border-bottom: #cddad6 0.2px solid;width: 85%;margin-left: 32rpx;margin-top: -24rpx;">
				</view>

			</view>

			<view class="historyView">
				<view style="justify-content: space-between; align-items: center;flex-direction: row;">
					<text class="historyTitle jh_fs_28">历史记录</text>
					<text class="clearHistory jh_fs_28" @click="clickHistory">清除历史</text>
				</view>
				<view class="historyListView">
					<text class="historyText jh_fs_28 jh_ellipsis" @click="historyItemTap(index)"
						v-for="(i,index) in HistoryLines3" :key=index v-if="index<10">{{i}}</text>
				</view>
			</view>
		</view>
		<u-action-sheet :list="actionList" @click="actionClick" v-model="actionShow"></u-action-sheet>
		<uni-calendar ref="calendar" :insert="false" :start-date="'1997-01-01'" @confirm="confirm"></uni-calendar>
	</view>
</template>

<script>
	var _self;
	export default {
		data() {
			return {
				fontSize: '',

				HistoryLines3: [],
				lineList: [],
				lineTypeNs: 0,
				lineTypeVs: 2,
				Destination: '', //终点
				actionShow: false,
				actionType: '出发',
				actionList: [{
					text: '出发',
					color: 'blue',
					fontSize: 28,
					subText: ''
				}, {
					text: '到达',
					color: 'blue',
				}],
				actionIndex: 0,
				selectDate: '',
				dateShow: true,
				popDate: '',
				Latitude: '',
				Longitude: '',
				startLatitude: '',
				startLongitude: '',
				endLatitude: '',
				endLongitude: '',
			};
		},
		onLoad(params) {
			_self = this;
			_self.fontSize = getApp().globalData.fontSize;
			_self.selectDate = _self.getTodayDate();
			_self.popDate = _self.getTodayDate();
			_self.GetMidwayLineByCode();

		},
		methods: {
			//---------------------------------点击车票类型---------------------------------
			typeClick(params) {
				if (params == 'expressTicket') {
					uni.navigateBack();
				}
			},
			GetMidwayLineByCode: function() {
				uni.showLoading();
				uni.request({
					url: _self.$h.expressInterface.expressInterface.GetMidwayLineByCode.url,
					method: _self.$h.expressInterface.expressInterface.GetMidwayLineByCode.method,
					header: _self.$h.expressInterface.expressInterface.GetMidwayLineByCode.header,
					data: {
						appSystemCode: _self.$h.expressInterface.expressInterface.appSystemCode.appSystemCode,
						lineType: "城际快线"
					},
					success: (res) => {
						var schedule = JSON.parse(res.data.Data);
						if (schedule.length > 0) {
							console.log(JSON.parse(res.data.Data))
							_self.lineList = JSON.parse(res.data.Data);
							_self.lineTypeNs = Math.ceil(_self.lineList.length / _self.lineTypeVs);
						}
						uni.hideLoading();
					},
					fail(res) {
						console.log(res)
						uni.hideLoading();
					}
				})
			},
			//---------------------------------选择出发/返回---------------------------------
			// actionClick: function(index) {
			// 	_self.actionIndex = index;
			// 	_self.actionType = _self.actionList[index].text;
			// },




			//---------------------------------查询---------------------------------
			queryClick(index) {
				var station = _self.lineList[index].LineName;
				if (_self.HistoryLines3) {
					for (let i = 0; i <= _self.HistoryLines3.length; i++) {
						if (station == _self.HistoryLines3[i]) {
							_self.HistoryLines3.splice(i, 1);
						}
					}
					_self.HistoryLines3.unshift(station);
				} else {
					_self.HistoryLines3.unshift(station);
				}
				uni.setStorage({
					key: 'HistoryLines3',
					data: _self.HistoryLines3,
				})
				var stationInfo = {
					type: '客运',
					selectDate: _self.popDate.replace(/-/g, '/'),
					startStation: _self.lineList[index].StartSiteName,
					endStation: _self.lineList[index].EndSiteName,
					startLatitude: _self.startLatitude,
					startLongitude: _self.startLongitude,
					endLatitude: _self.endLatitude,
					endLongitude: _self.endLongitude
				}
				console.log(stationInfo);
				uni.navigateTo({
					url: '../Order/ConfirmOrder?stationInfo=' + JSON.stringify(stationInfo)
				})
			},
			//---------------------------------清除历史---------------------------------
			clickHistory() {
				_self.HistoryLines3 = [];
				uni.setStorage({
					key: 'HistoryLines3',
					data: _self.HistoryLines3,
				})
			},
			//---------------------------------点击历史记录---------------------------------
			historyItemTap(index) {
				let stationArray = _self.HistoryLines3[index].split('-');
				var stationInfo = {
					type: '客运',
					selectDate: _self.popDate.replace(/-/g, '/'),
					startStation: stationArray[0],
					endStation: stationArray[1],
					startLatitude: _self.startLatitude,
					startLongitude: _self.startLongitude,
					endLatitude: _self.endLatitude,
					endLongitude: _self.endLongitude
				}
				uni.navigateTo({
					url: '../Order/ConfirmOrder?stationInfo=' + JSON.stringify(stationInfo)
				})
			},
			//---------------------------------打开日历---------------------------------
			calendarSelect: function() {
				_self.$refs.calendar.open();
			},
			//---------------------------------日期确定---------------------------------
			confirm(params) {
				console.log(params);
				_self.dateShow = false;
				_self.selectDate = params.fulldate + ' ' + params.lunar.ncWeek;
				_self.popDate = params.fulldate;
			},
			//---------------------------------获取当前日期---------------------------------
			getTodayDate() {
				var date = new Date();
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var day = date.getDate();
				var timer = year + '-' + month + '-' + day;
				return timer;
			},
		}
	}
</script>

<style lang="scss">
	.myView {
		flex-direction: column;
		width: 750rpx;
	}

	// 背景图片
	.imageTop {
		width: 750rpx;
		height: 440upx;
	}

	//查询车票整块
	.queryTickets {
		width: 706rpx;
		border-radius: 20rpx;
		// left: 22rpx;
		margin-left: 22rpx;
		// margin-top: -60rpx;
	}

	.ticketView {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}

	//选择起始点
	.lineClass {
		// margin-top: 40rpx;
		display: flex;
		align-items: center;
		justify-items: center;
		padding-left: 20upx;
		padding-right: 20upx;
		margin-left: -20rpx;

	}

	//转换图片
	.changeImage {

		width: 57upx;
		height: 59upx;
		padding-top: 44upx;
		margin: 0 auto;

	}

	//出发点
	.start {
		font-weight: 300;
		color: #2C2D2D;
		width: 200rpx;
		border-bottom: 1upx solid #dadada;
		margin-top: 70rpx;
		padding-bottom: 20rpx;
		position: relative;
		margin-right: 30rpx;
		margin-left: 60rpx;
	}

	.end {
		font-weight: 300;
		color: #2C2D2D;
		width: 200upx;
		border-bottom: 1upx solid #dadada;
		margin-top: 70rpx;
		padding-bottom: 20rpx;
		position: relative;
		margin-left: 30rpx;
	}

	//选择日期
	.dateClass {
		font-weight: 400;
		line-height: 125upx;
		margin-left: 60rpx;
	}

	//查询视图
	.queryView {
		// margin-top: 60upx;
		margin-top: 30rpx;
		margin-left: 29upx;
		margin-right: 29upx;
		padding-bottom: 40rpx;
	}

	//查询
	.queryButton {
		width: 300rpx;
		height: 90upx;
		background: linear-gradient(270deg, #EC5249, #EF7D4E);
		color: #FFFFFF;
		border-radius: 45upx;
	}

	.historyView {
		padding-top: 20rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 20rpx;
		width: 706upx;
		font-family: MicrosoftYaHei;
		color: #999999;
		font-size: 24upx;
	}

	.historyTitle {
		color: #2C2D2D;
		margin-left: 20rpx;
	}

	.historyListView {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		color: #999999;
		// font-size: 20rpx;
		font-weight: 300;
		margin-left: 20rpx;
		margin-right: 20rpx;
		padding-bottom: 20rpx;
	}

	.historyText {
		margin-top: 20rpx;
		margin-right: 20rpx;
		color: #666666;
		// width: 200rpx;
	}

	.clearHistory {
		color: #2C2D2D;
		margin-right: 20rpx;
		float: right;
	}

	.row-rotate {
		transition-duration: 0.3s;
		transform: rotate(0deg);
	}

	.rotate {
		transition-duration: 0.3s;
		transform: rotate(720deg);
	}

	.row-translateX {
		transition-duration: 0.3s;
		transform: translateX(0px);
	}

	.translateXR {
		transform: translateX(190px);
	}

	.translateXL {
		transform: translateX(-190px);
	}
</style>